import ScrollBarLayout from '@/components/ScrollBarLayout';
import { useContext, useEffect, useMemo, useState } from 'react';
import { Empty, Spin } from 'antd';
import { getColorTextLoadMap } from '@/utils';
import { ChangeControllerContext } from '../common';
import { getImageByProcInstIDService } from '../services/DetailOAService';
import { BGflowBusinessType } from '../common/Format';

export const DetailCenterFlowImageView: React.FC = () => {
  /** 获取上下文 */
  const { infoObj } = useContext(ChangeControllerContext);

  /**  保存审核信息 */
  const [taskNodeInfoObj, setTaskNodeInfoObj] = useState<Record<string, any>>({
    activitiTaskHandleList: [], //未办理 的任务
    activitiHisProcinstList: [], //已办理的任务
    flag: null,
  });

  /** 初始化处理流程数据 */
  useEffect(() => {
    if (infoObj?.paramObject && JSON.stringify(infoObj?.paramObject) != '{}') {
      let arr: any = null;
      let paramObject: Record<string, any> = infoObj?.paramObject;
      for (let k in paramObject) {
        if (k?.endsWith(BGflowBusinessType())) {
          arr = paramObject[k];
        }
      }
      setTaskNodeInfoObj({
        activitiTaskHandleList: arr ? arr.mactivitiTaskHandleList : [], //未办理 的任务
        activitiHisProcinstList: arr ? arr.mactivitiHisProcinstList : [], //已办理的任务
        flag: arr ? arr.flag : null,
      });
    } else {
      setTaskNodeInfoObj({
        activitiTaskHandleList: [], //未办理 的任务
        activitiHisProcinstList: [], //已办理的任务
        flag: null,
      });
    }
  }, [infoObj]);

  /** 获取流程图回调 */
  const imageCallback = (_res) => {};

  /**获取流程图接口 */
  const { getImageByProcInstIDLoading, getImageByProcInstIDData, getImageByProcInstIDRun } = getImageByProcInstIDService(imageCallback);

  useEffect(() => {
    if (infoObj?.workflowID) {
      getImageByProcInstIDRun({ procInstID: infoObj?.workflowID });
    }
  }, [infoObj]);

  /** 处理审核结果 */
  const renderCheckRules = useMemo(() => {
    if (taskNodeInfoObj?.activitiHisProcinstList?.length > 0) {
      const checkResultType: string = taskNodeInfoObj?.activitiHisProcinstList[0]?.checkResult;
      let checkResultCls: string = '';
      const { colorText } = getColorTextLoadMap(taskNodeInfoObj?.activitiHisProcinstList[0].checkResultName);
      if (checkResultType?.endsWith('1000') || checkResultType?.endsWith('1001')) {
        checkResultCls = '#096dd9';
      } else if (checkResultType?.endsWith('1002')) {
        checkResultCls = '#00cc33';
      } else {
        checkResultCls = '#ff4d4f';
      }

      return (
        <div
          style={{
            padding: '0px 100px',
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'center',
          }}
        >
          <div
            style={{
              width: '20px',
              height: '20px',
              background: checkResultCls,
              marginRight: '5px',
              borderRadius: '5px',
            }}
          />
          {colorText}
        </div>
      );
    } else {
      return <></>;
    }
  }, [taskNodeInfoObj?.activitiTaskHandleList]);

  return (
    <div className="commonTabsBodyDom">
      <div className={'tabsBodyInfoDom'}>
        <Spin>
          {getImageByProcInstIDData ? (
            <>
              {renderCheckRules}
              <ScrollBarLayout style={{ padding: '5px 100px', textAlign: 'center' }}>
                <img src={`data:image/jpeg;base64,${getImageByProcInstIDData}`} />
              </ScrollBarLayout>
            </>
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'暂无数据'} />
          )}
        </Spin>
      </div>
    </div>
  );
};
